<template>
  <div>
    <table-paging
      :tableData="tableData"
      :tableConfig="tableConfig"
      @on-paging-change="query"
      @on-select="handleSelect"
      @on-select-all="handleSelect"
    >
      <div class="content-wrapper">
        <Row>
          <Col span="12">
            <Input
              v-model="keyword"
              search
              enter-button
              placeholder="用户名/电话/电子邮件/用户昵称"
              @on-search="query(1,pageSize)"
            />
          </Col>
          <Col span="12" style="text-align: right;">
            <Button type="error" @click="del">删除</Button>
          </Col>
        </Row>
      </div>
      <template v-slot:nickname="{row,column,index}">{{row.userInfo.nickname}}</template>
      <template v-slot:status="{row,column,index}">
        <Tag color="success" v-if="row.status==='using'">可用</Tag>
        <Tag color="warning" v-else-if="row.status==='disable'">禁用</Tag>
        <Tag color="error" v-else-if="row.status==='delete'">删除</Tag>
      </template>
    </table-paging>
  </div>
</template>
<script>
import { queryUser, delUser } from '@/api/user.js'
import TablePaging from '@/components/table-paging'
export default {
  components: {
    TablePaging
  },
  data() {
    return {
      tableData: {},
      tableDataSelected: [],
      tableConfig: {
        columns: [{
          type: 'selection',
          width: 50,
          align: 'center'
        }, {
          title: '用户名',
          key: 'username'
        }, {
          title: '电话',
          key: 'phone'
        }, {
          title: '电子邮件',
          key: 'email'
        }, {
          title: '用户昵称',
          slot: 'nickname'
        }, {
          title: '备注',
          key: 'note'
        }, {
          title: '状态',
          slot: 'status'
        }, {
          title: '注册日期',
          width: 150,
          key: 'createDate'
        }]
      },
      pageSize: 10, // 页面每页显示的数量
      keyword: '' // 查询的关键字
    }
  },
  methods: {
    query(page, pageSize) {
      let params = {
        pageNum: page,
        pageSize: pageSize,
        keyword: this.keyword
      }
      queryUser(params, data => {
        this.tableData = data.data
      })
    },
    del() {
      if (this.tableDataSelected.length > 0) {
        this.$Modal.confirm({
          title: '确定删除？',
          content: `已选中${this.tableDataSelected.length}个数据`,
          onOk: () => {
            let ids = []
            this.tableDataSelected.forEach(item => {
              ids.push(item.id)
            })
            delUser(ids, data => {
              this.$Message.success(data.data)
              this.query(1, this.pageSize)
            })
          }
        })
      } else {
        this.$Message.warning('请选择要删除的数据')
      }
    },
    // 选表格数据的处理
    handleSelect(selection) {
      this.tableDataSelected = selection
    }
  },
  mounted() {
    this.query(1, this.pageSize)
  }
}
</script>
